<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>用户列表</title>
    <link rel="stylesheet" href="../bootstrap-3.4.1/dist/css/bootstrap.css" />
    <script src="jquery-3.6.1.min.js"></script>
    <script src="../bootstrap-3.4.1/dist/js/bootstrap.js"></script>
    <style>
      *{
        color: indigo;
      }
      #tbd {
        text-align: center;
        width: 1300px;
        margin-left: 30px;
        margin: auto;
      }
      #tbd td{
        height: 60px;
        line-height: 60px;
      }
      th {
        text-align: center;
      }
      .neirong {
        margin: 30px;
      }
      h2 {
        margin-left: 30px;
      }
      h2:nth-last-child(2) {
        margin-top: 60px;
      }
      #tbd1 {
        width: 600px;
        margin-left: 30px;
        text-align: center;
        border: 1px solid #ccc;
      }
      .xiangqing {
        width: 500px;
        height: 200px;
        background-color: rgba(0, 0, 0, 0.6);
        padding: 30px;
        color: white;
      }
      #cuo {
        position: absolute;
        top: 0;
        right: 0;
        cursor: pointer;
        color: white;
        font-size: 20px;
      }
      .tishi{
        display: none;
        position: fixed;
        top: 38px;
        left: 42%;
        width: 300px;
        height: 66px;
        color: white;
        font-size: 16px;
        text-align: center;
        line-height: 66px;
        z-index: 9999;
        background-color: rgba(0, 0, 0, 0.6);
      }
      #sousuo{
        width: 300px;
        height: 35px;
        border: 1px solid #ccc;
        margin-top: 60px;
      }
      #btn{
        width: 100px;
        height: 35px;
        margin-top: 60px;
        color: white;
        border: 1px solid #ccc;
        background-image:linear-gradient(0deg,#a18cd1 0%, #fbc2eb 100%)
      }
      #box{
        width: 1300px;
        height: 500px;
        overflow: auto;
        margin: auto;
        text-align: center;
      }
      .btncss{
        width: 60px;
        height: 40px;
        line-height: 40px;
      }
      .btncss:nth-child(2){
        border: 1px solid #f56c6c;
        background-color: #36b368!important;
      }
      .btncss:nth-child(1){
        border: 1px solid #f56c6c;
        background-color: #f56c6c !important;
     
      }
      #tbd thead{
        position: sticky;
        top: 0;
        left: 0;
        background-color: #f5f5f5;
        z-index: 99;
      }
      #xp{
        width: 100%;
        text-align: center;
        margin-bottom: 30px;
      }
      #xiang{
        text-align: center;
        position: fixed;
        top: 30px;
        left: 35%;
        width: 300px;
        padding-left: 30px;
        padding: 30px;
        background-color: rgba(0, 0, 0, 0.6);
        z-index: 999;
        display: none;
      }
      #xiang input{
        width: 200px;
      }
      #btncss{
       width: 100px;
       height: 30px;
       color: white;
 
        cursor: pointer;
        border: none;
        background-color: blue;
      }
    </style>
  </head>
  <body>  
    <div class="tishi"></div>
      <div id="xp"><span>用户名:</span><input type="text" id="sousuo"><button id="btn">查询</button></div>
     
 
      <div id="xiang">
        id&emsp;:<input type="text" id="ids" disabled><br>
        用户:<input type="text" id="username" disabled><br>
        性别:<input type="text" id="sex" placeholder="输入1或2"><br>
        年龄:<input type="text" id="age" placeholder="输入数字"><br>
        省市:<input type="text" id="province"><br>
        市区:<input type="text" id="city"><br>
        县乡:<input type="text" id="area"><br>
        详址:<input type="text" id="detail_address"><br>
        图片:<input type="text" id="img"><br>
        <button id="btncss">保存修改</button>
        <div id="cuo">×</div>
    </div>
      <div class="table-responsive" id="box">
      <h2>用户列表</h2>
      <table class="table table-hover" id="tbd">
        <thead>
          <tr>
            <th><input type="checkbox" name="" id="all" /></th>
            <th>id</th>
            <th>用户名</th>
            <th>性别</th>
            <th>注册时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
        </tbody>
      </table>
    </div>
  </body>
  <script>
    $(function () {
      xuanran();
      //全选事件
      $("#all").click(allFun);
      //点击消失
      $("#cuo").click(cuoFun);
      $('#btn').click(btnFun)
      $('#sousuo').keyup(btnFun)
      $('#btncss').click(btncssFun)
    });
    //点击搜索
    function btnFun(){
      if(event.key=='Enter' || event.type == 'click'){
        $.ajax({
        url: 'https://api.zzgoodqc.cn/api/searchUser',
        type: "get",
        data:{
          key:$('#sousuo').val(),
          page:1,
          limit:300,
        },
        headers: {
          Authorization: "Bearer " +localStorage.getItem('token'),
        },
        success: function (res) {
          if(res.code==200){
            render(res.data)
          }
          
        },
        dataType: "json  ",
      });
      }
      
    }
    //点击消失
    function cuoFun() {
      $("#xiang").hide();
     
    }
    //全选
    function allFun() {
      $("#tbd tbody input[type=checkbox]").prop(
        "checked",
        $("#all").prop("checked")
      );
    }
    function fun() {
      let res =
        $("#tbd tbody input:checked").length ==
        $("#tbd tbody input[type=checkbox]").length
          ? true
          : false;
      $("#all").prop("checked", res);
    }

    function xiangqing(id,index) {
      $.ajax({
        url: "https://api.zzgoodqc.cn/api/user/" + id,
        type: "get",
        headers: {
          Authorization: "Bearer " + localStorage.getItem('token'),
        },
        success: function (res) {
          if (res.code == 200) {
            $("#xiang").show();
            xiangqings(res.data)
            
          }
        },
        dataType: "json  ",
      });
    }
    function xiangqings(data){
      
      $('#ids').val(data.id)
      $('#username').val(data.username)
      $('#sex').val(data.sex??'')
      $('#age').val(data.age??'')
      $('#province').val(data.province??'')
      $('#city').val(data.city??'')
      $('#area').val(data.area??'')
      $('#detail_address').val(data.detail_address??'')
      $('#img').val(data.img??'')
    }
    function btncssFun(){
      var xid=$('#ids').val()
      let date={
        sex:$('#sex').val(),
        age: $('#age').val(),
        province:$('#province').val(),
        city:$('#city').val(),
        area:$('#area').val(),
        detail_address: $('#detail_address').val(),
        img:$('#img').val(),
      }
      console.log(xid);
      $.ajax({
          url:'https://api.zzgoodqc.cn/api/user/'+xid,
          type:'PUT',
          data:date,
          headers:{
            Authorization:'Bearer '+localStorage.getItem('token'),
          },
          dataType:'json',
          success:function(res){
            console.log(res);
            if(res.code==200){
              $('#xiang').hide()
              alert(res.message)
            }else{
              alert(res.message)
            }
          }
        })
    }
    //删除
    function shanchu(id, index) {
      $.ajax({
        url: "https://api.zzgoodqc.cn/api/user/" + id,
        type: "DELETE",
        headers: {
          Authorization: "Bearer "+localStorage.getItem('token'),
        },
        success: function (res) {
          if (res.code == 200) {
            tishi('删除成功','blue') 
            xuanran();
          }
        },
        dataType: "json  ",
      });
    }
    //获取列表
    function xuanran() {
      var data = JSON.parse(localStorage.getItem("user"));
      if (data == null) {
        alert("请先登录");
        location.href = "登录注册.html";
        return false;
      }
      $.ajax({
        url: "https://api.zzgoodqc.cn/api/user",
        type: "get",
        headers: {
          Authorization: "Bearer " + localStorage.getItem('token'),
        },
        data:{
          page: 1,
          limit: 300,
        },
        success: function (res) {
          render(res.data);
        },
        dataType: "json",
      });
    }
    //渲染列表
    function render(data) {
      if(data==''){
        $("#tbd tbody").html( '<tr><td colspan="6" style="font-size:30px;color:red;">暂无数据</td><tr>');
        return false
      }
      var html = "";
      $.each(data, function (index, item) {
        html += `
            <tr>
            <td><input type="checkbox" name="" id="" / onclick="fun()"></td>
            <td>${item.id}</td>
            <td>${item.username}</td>
            <td>${item.age == null ? "男" : item.age}</td>
            <td>${item.created_at}</td>
          
            <td>
            <button onclick="xiangqing(${item.id},${index})"  class='btncss glyphicon glyphicon-wrench'></button>
            <button onclick="shanchu(${item.id},${index})" class='btncss glyphicon glyphicon-trash'></button>
            </td>
            <tr>
            `;
      });
      $("#tbd tbody").html(html);
    }
    var flog=true
    function tishi(obj,bcolor){
      if(flog){
        $('.tishi').show()
      $('.tishi').html(obj)
      $('.tishi').css('color',bcolor)
      setTimeout(function(){
        $('.tishi').hide()
        flog=true
      },2000)
      flog=false
      }
    }
  </script>
</html>
